<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        采购管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>添加采购单
      </p>
      <div class="content">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <div style="padding-top: 20px; float: left">
              <el-form-item label="采购机构" prop="purchaseName">
                <el-select
                  style="width: 300px"
                  :disabled="true"
                  placeholder="总部"
                  class="filter-item">
                  <el-option label="总部"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="采购类型" prop="purchaseType">
                <el-select
                  style="width: 100%"
                  :disabled="true"
                  @change="channelNameValue"
                  placeholder="直采"
                  class="filter-item">
                  <el-option label="直采"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="政策标识" prop="policyCode">
                <el-select
                  style="width: 100%"
                  :disabled="clickBool == 'f'"
                  v-model="form.policyCode"
                  placeholder="政策标识"
                  @change="handBian"
                  class="filter-item">
                  <el-option
                    v-for="item in policyCodeOptions"
                    :key="item.policyCode"
                    :label="item.policyCode"
                    :value="item.policyCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="终端类型" prop="productNo">
                <el-select
                  style="width: 100%"
                  :disabled="clickBool == 'f'"
                  v-model="form.productNo"
                  placeholder="终端类型"
                  @change="zhongBian"
                  class="filter-item">
                  <el-option 
                    v-for="item in terminalOptions"
                    :key="item.productNo"
                    :label="item.label"
                    :value="item.productNo">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="终端价格" prop="unitAmt">
                <el-select
                  style="width: 100%"
                  :disabled="clickBool == 'f'"
                  v-model="form.unitAmt"
                  @change="handMoeny"
                  placeholder="选择终端价格"
                  class="filter-item" >
                  <el-option
                    v-for="item in moneyOptions"
                    :key="item.unitAmt"
                    :label="item.unitAmt"
                    :value="item.unitAmt" >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="购买数量" prop="buyNumber">
                <div style="display: flex">
                  <el-input
                    v-model="form.buyNumber"
                    @blur="shiqu"
                    maxlength="5"
                    @input="payNumChange"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    placeholder="请输入购买数量"
                  ></el-input>
                  <span>&nbsp;&nbsp;个</span>
                </div>
              </el-form-item>
              <el-form-item style="margin-bottom: -10px; margin-top: -10px">
                <div
                  v-if="this.form.buyNumber != '' && this.form.unitAmt != ''"
                >
                  总售价:{{ form.amount }}元
                </div>
              </el-form-item>
          
          </div>
        </el-form>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <div style="padding-top: 20px; float: left">
            <el-col>
              <el-form-item label="收货联系人" prop="linkName">
                <el-input
                  :maxlength="10"
                  v-model="form.linkName"
                  placeholder="请输入联系人姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人手机号" prop="linkPhone">
                <el-input
                  v-model="form.linkPhone"
                  maxlength="11"
                  @blur="shiqu"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  placeholder="请输入联系人手机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="收货地址" prop="county">
                <div style="display: flex; aligin-item: center">
                  <el-select
                    class="appointVip"
                    v-model="form.province"
                    placeholder="请选择省"
                    @change="city(2)"
                  >
                    <el-option
                      v-for="(val, index) in paizi"
                      :label="val.name"
                      :value="val.code"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    class="appointVip"
                    v-model="form.city"
                    placeholder="请选择市"
                    @change="county()"
                  >
                    <el-option
                      v-for="(val, index) in paizi1"
                      :label="val.name"
                      :value="val.code"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    class="appointVip"
                    v-model="form.county"
                    placeholder="请选择县"
                  >
                    <el-option
                      v-for="(val, index) in paizi2"
                      :label="val.name"
                      :value="val.code"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-input
                    :maxlength="50"
                    class="detailAddress"
                    placeholder="请输入具体地址"
                    v-model="form.addr"
                    style="
                      width: 645px !important;
                      margin-left: 12px;
                      margin-top: 0px;
                    "
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注">
                <textarea
                  :maxlength="100"
                  v-model="form.remarks"
                  name="remarks"
                  style="
                    width: 670px;
                    border: 1px solid #dcdfe6;
                    outline: none;
                    padding: 10px;
                  "
                ></textarea>
              </el-form-item>
            </el-col>
          </div>
        </el-form>

        <el-col v-if="this.form.checkStatus == 6">
          <div class="line" style="padding-left: 35px">
            <div>是否需要打款凭证</div>
            <div style="margin-left: 50px">
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </div>
            <el-button
              class="voucher"
              type="primary"
              plain
              v-if="radio == 1"
              @click="voucher"
            >
              上传支付凭证
            </el-button>
          </div>
        </el-col>
        <el-col>
          <div style="padding-left: 120px; margin-top: 60px">
            <el-button
              type="primary"
              @click="confirm"
              :loading="requestBool"
              :disabled="radio == 1"
              >确认</el-button
            >
            <el-button plain @click="calc1">取消</el-button>
          </div>
        </el-col>
      </div>
    </div>
    <el-dialog
      title="确认提交采购单"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import axios from "axios";
import { name} from "../../plugins/rules.js"
var unitAmts = (rule, value, callback) => {
  var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if (value) {
    if (reg.test(value)) {
      return callback();
    } else {
      return callback(new Error("请输入正确的金额"));
    }
  } else {
    return callback(new Error("请输入金额"));
  }
};

export default {
  data() {
    return {
      
      paizi:[],
      paizi1:[],
      paizi2:[],
      // 是否显示可以跳转到凭证页面
      chackStatus: "",
      // 控制单选多选
      radio: "2",
      // 回显需要的code
      orderCode: "",
      //计算价格
      totalMarks: 0,
      // 控制是否能点击
      clickBool: "t",
      // 政策名下拉框
      policyCodeOptions: [],
      // 价钱
      moneyOptions: [],
      // 终端选项
      terminalOptions: [],
      value: "",
      // 控制弹出框
      dialogVisible: false,
      uploadDisabled: "",
      dialogImageUrl: "",
      dialogImageUrl: "",
      httpurl: this.GLOBAL.httpurl,
      // 收货地址
      selectedOptions: [],
      // 节流操作
      requestBool: false,
      channelNameList: [],
      channelTypeList: [],
      channelTypeLists: [],
      sumMoney: "",
      options: regionData, //收货地址
      form: {
        amount: "",
        purchaseName: "", //采购机构
        purchaseType: "", //采购类型
        channelType: "", //
        province: "", //省份
        city: "", //城市
        county: "", //区县
        addr: "", //详细地址
        policyCode: "", //政策名称
        productNo: "", //终端类型
        unitAmt: "", //终端价格
        buyNumber: "", //购买数量
        linkName: "", //收货联系人
        linkPhone: "", //联系人电话
        remarks: "", //备注
        terminalType: "", //商品型号
        unitAmtList: [],
      },
      rules: {
        purchaseName: [{ required: true }],
        purchaseType: [{ required: true }],
        county: [{ required: true }],
        policyCode: [{ required: true }],
        productNo: [{ required: true }],
        unitAmt: [{ required: true }],
        buyNumber: [{ required: true }],
        linkName: [{ required: true }],
        linkPhone: [{ required: true }],
        terminalType: [{ required: true }],
        remarks: [{ required: true }],
      },
    };
  },
  created() {
    this.chackStatus = this.$route.query.chackStatus;
    this.orderCode = this.$route.query.orderCode;
    this.clickBool = this.$route.query.disBool;
    // 调用政策名称
    this.getName1();
    this.area()// 省
    if (this.$route.query.disBool != "t") {
      if (this.$route.query.back && this.$route.query.back == "001") {
        // 调用本地存储的数据
        this.getSession1();
      } else {
        // 调用回显数据接口
        this.getData();
      }
    }
  },
  methods: {
    // 省
    area(){
      axios.post("/area/province").then(res=>{
          this.paizi=res.data
        
      }).catch(err=>{})
    },
    //市
    city(val){
      console.log(val)
      if(val==1){
      
      }else{
        this.form.city=""
        this.form.county=""
      }
      axios.post("/area/city",{upCode:this.form.province}).then(res=>{
        this.paizi1=res.data
      })
    },
    // 区
    county(val){
      if(val!=1){
        this.form.county=""
      }
      axios.post("/area/county",{upCode:this.form.city}).then(res=>{
        this.paizi2=res.data
      })
    },
    payNumChange() {
      // console.log(123456)
      if (this.form.unitAmt != "" && this.form.buyNumber != "") {
        var datas = {};
        datas.first = this.form.unitAmt;
        datas.second = this.form.buyNumber;
        datas.operation = 2;
        datas.scale = 2;
        axios
          .post("api/common/compute", datas)
          .then((res) => {
            console.log(res);
            this.form.amount = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 金额改变
    handMoeny() {
      if (this.form.unitAmt != "" && this.form.buyNumber != "") {
        var datas = {};
        datas.first = this.form.unitAmt;
        datas.second = this.form.buyNumber;
        datas.operation = 2;
        datas.scale = 2;
        axios
          .post("api/common/compute", datas)
          .then((res) => {
            console.log(res);
            this.form.amount = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 上传支付凭证跳转页面
    voucher() {
      let datas = JSON.stringify(this.form);
      sessionStorage.setItem("datas", datas);
      this.$router.push({
        name: "payMentes1",
        query: {
          orderCode: this.orderCode,
          set: "5",
        },
      });
    },
    //获取本地存储
    getSession1() {
      let data = sessionStorage.getItem("datas");
      data = JSON.parse(data);

      this.form = data;
      this.form.addr = data.detailAddr;
      this.getType();
      // 给省市区进行赋值
      var newArr = [];
      newArr.push(data.province);
      newArr.push(data.city);
      newArr.push(data.county);
      this.selectedOptions = newArr;
    },
    // 回显
    getData() {
      axios.post("/api/direct/getDirectOrderDetail", { orderCode: this.orderCode }).then((res) => {
          this.form = res.data.data[0][0];
          this.form.addr = res.data.data[0][0].detailAddr;
          console.log(this.form.addr);
          this.getType();
          // 给省市区进行赋值
          this.city(1)
          this.county(1)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 政策改变
    handBian() {
      // alert(this.form.policyCode)
      this.form.productNo = "";
      this.form.unitAmt = "";
      this.getType();
    },
    // 改变终端
    zhongBian() {
      this.form.unitAmt = "";
      this.getMoney();
    },
    // 获取政策名称
    getName1() {
      axios
        .get("/api/direct/getPolicyInfo")
        .then((res) => {
          console.log("政策名称");
          console.log(res);
          this.policyCodeOptions = res.data.data;
          console.log(this.form.policyCode);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 终端类型
    getType() {
      axios
        .post("/api/direct/getProductNoInfo", {
          policyCode: this.form.policyCode,
        })
        .then((res) => {
          console.log("获取的终端一堆");
          console.log(res);
          this.terminalOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 商品单价
    getMoney() {
      axios
        .post("/api/direct/getProductPrice", {
          policyCode: this.form.policyCode,
          productNo: this.form.productNo,
        })
        .then((res) => {
          console.log("价格");
          console.log(res);
          this.moneyOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确认提交
    confirm() {
      // var phone = this.form.linkPhone;
      if (false) {
        layer.open({
          content: "手机号输入有误",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else {
        if (
          (this.form.policyCode != "" &&
            this.form.productNo != "" &&
            this.form.unitAmt != "" &&
            this.form.buyNumber != "" &&
            this.form.linkName != "" &&
            this.form.linkPhone != "" &&
            this.form.province != "" &&
            this.form.city != "" &&
            this.form.county != "",
          this.form.addr != "")
        ) {
          this.requestBool = true;
          this.form.unitAmtList = [];
          this.form.unitAmtList.push(this.form.unitAmt);
          if (this.orderCode) {
            console.log("进入回显");
            this.form.orderCode = this.orderCode;
          }
          axios
            .post("/api/direct/addDirectOrder", this.form)
            .then((res) => {
              console.log(res);
              if (res.data.code == "0000") {
                layer.open({
                  content: "成功",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                setTimeout(() => {
                  this.requestBool = false;
                  this.$router.push({
                    name: "purchase",
                  });
                }, 1000);
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                this.requestBool = false;
              }
            })
            .catch((err) => {
              console.log(err);
              layer.open({
                content: "网络连接超时，请稍后再试",
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              this.requestBool = false;
            });
        } else {
          layer.open({
            content: "数据全为必填",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
        }
      }
    },
    // 取消返回列表
    calc1() {
      this.$router.push({
        name: "purchase",
      });
    },
    // 去人提交
    confirm2() {
      axios
        .post("/api/direct/addDirectOrder", this.form)
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            layer.open({
              content: "成功",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    // totalNum() {
    //   console.log("执行");
    //   return this.form.unitAmt * this.form.buyNumber;
    // },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
/* .content {
  width: 100%;
  margin: 60px 20px;
} */
/deep/ .el-select > .el-input {
  width: 300px;
}
/deep/ .el-input__inner {
  width: 300px;
}

/deep/ .el-form-item {
  width: 392px !important;
  margin-right: 40px;
}
.el-textarea {
  width: 740px;
}
.el-dropdown {
  margin-top: 6px;
  margin-left: 6px;
}
.el-textarea__inner {
  min-height: 100px !important;
}
.el-button {
  padding: 12px 20px;
}
.buttons {
  float: left;
  margin-top: 80px;
}
.line {
  display: flex;
  align-items: center;
}
.voucher {
  margin-left: 50px;
}
/deep/ .el-input__inner {
  width: 240px !important;
}
/deep/ .el-select {
  width: 240px !important;
}
/deep/ .el-input {
  width: 240px !important;
}
/deep/ .detailAddress .el-input__inner {
  width: 582px !important;
}

/deep/ .el-form-item__error {
  display: none !important;
}
.appointVip{
  width: 160px !important;
  margin-right: 10px
}
/deep/ .appointVip > .el-input{
  width: 160px !important;
}
/deep/ .appointVip > .el-input > .el-input__inner{
  width: 160px !important;
}
</style>
